<template>
  <view style="margin-top: 150rpx">
    <view class="weui-cell">
      <view class="weui-cell__hd">
        <image src="../../../static/resource/images/ic_myapp.png" style="display:block;width:40rpx;height:40rpx;margin-right:14rpx;"></image>
    </view>
      <view class="weui-cell__bd">
        <text style="color: #be9719;font-size: 13px;">点击右上角”添加到我的小程序“，方便下次找到</text>
    </view>
      <view class="weui-cell__hd">
        <image src="../../../static/resource/images/modal_closer.png" style="display:block;width:30rpx;height:30rpx"></image>
      </view>
    </view>
  </view>

  <!--医院轮播图-->
  <view>
    <uni-swiper-dot class="uni-swiper-dot-box" :info="slides" :current="current" field="content">
      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper" :autoplay="autoplay" :interval="interval" :duration="duration">
        <swiper-item v-for="(item, index) in slides" :key="index">
          <view class="swiper-item">
            <image :src="item.pic_image_url"  mode="aspectFill" :draggable="false"> </image>
         </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
  </view>

  <!--两个快捷入口-->
  <view v-if="nav2s  && nav2s.length > 0" class="nav2-list">
    <block v-for="(item,index) in nav2s" :key="index">
      <view class="nav2-item" :data-index="index" @click = "nav2Click">
        <view class="nav2-pic"><image :src="item.pic_image_url" mode="widthFix" ></image>
        </view>
      </view>
    </block>
  </view>



  <!--  <uni-section>-->
<view>
    <uni-grid :column="5" :show-border="false" :square="false" >
      <uni-grid-item v-for="(item ,index) in navs" :index="index" :key="index">
        <view class="grid-item-box" @click="navsClick(item)">
          <image class="image" :src="item.pic_image_url" mode="widthFix" />
          <text class="text">{{item.title}}</text>
        </view>
      </uni-grid-item>
    </uni-grid>
</view>
<!--  </uni-section>-->
<view>
    <uni-section title="医院列表" type="line">
    <uni-list  v-for="(item,index) in hospitals" :key="index" >
      <uni-list-item :title=item.name :note=item.intro showArrow :clickable ="true" @click="toHospitals"
                     :thumb=item.avatar_url
                     thumb-size="lg"
                    />
    </uni-list>
  </uni-section>
</view>


</template>


<script setup>

import {ref,toRaw} from 'vue';
import {onLoad} from '@dcloudio/uni-app';
import { getPageConfigData } from '@/api/testdemo/configdata';

const autoplay = ref(true);
const interval = ref(3000);
const duration = ref(500);
const current = ref(0);
const mode = ref('round');
const swiperDotIndex = ref(0);


//定义轮播图数据
const slides = ref([]);

  	//快捷入口多个
const navs = ref([]);

const nav2s = ref([]);

  //列表信息
const hospitals = ref([]);

const  changeSwiper = ((e)=> {
  current.value = e.detail.current
});

onLoad(()=>{
  console.log('onLoad')
  // 获取页面配置数据
  getPageConfigData().then(res=> {
    // console.log("页面配置数据：" + JSON.stringify(res));
    //轮播图数据
    slides.value =  res.data.slides;
    // console.log("页面配置列表数据：" + JSON.stringify(res.data.slides));
    nav2s.value  = res.data.nav2s;
    //快捷入口多个
    navs.value = res.data.navs;
    //医院列表
    hospitals.value =  res.data.hospitals;
    //加载更多医院数据
    loadMoreHospitals();
  });
});




const nav2Click = ((e)=> {
  console.log("点击的对象信息：" +JSON.stringify(e));
  //转成普通对象：toRaw
  const nav2 = toRaw(nav2s.value);
  console.log("普通对象信息："  + JSON.stringify(nav2))
  const navCurrent =  nav2[e.currentTarget.dataset.index];
  console.log("点击的当前对象信息：" + JSON.stringify(navCurrent));
  if (navCurrent.id === 1){
    uni.navigateTo({
      url: `../../../pages/care/index?hid=6`
    })
  }else if (navCurrent.id === 2){
    uni.navigateTo({
      url:`../../../pages/care/index?hid=5`
    });
  }
})



const navsClick = ((item)=> {
  console.log("项目信息：" +JSON.stringify(item));
  uni.navigateTo({
    url: `../../mystu/serve/index?pageId=` + item.id
  });
});



const toHospitals = (()=> {
  console.log("跳转到医院列表生效中")
  uni.showToast({
    title: '敬请期待',
    icon: 'none',
    duration:3000
  })

})

function loadMoreHospitals() {
  for (let i = 0; i <4 ; i++) {
    hospitals.value.push(hospitals.value[i]);
  }

}

</script>

<style>
page{
  background-color: #fff;
}

.swiper-box {
  height: 200px;
}

.text {
  font-size: 28rpx;
  margin-top: 10rpx;
}

.nav2-list {
  margin: 10rpx 20rpx 0 20rpx;
}
.nav2-list::after {
  content: '';
  display: block;
  height: 0;
  line-height: 0;
  clear: both;
  visibility: hidden;
}
.nav2-item {
  float: left;
  margin-top: 20rpx;
  width: 50%;
  text-align: center;
  box-sizing: border-box;
  padding: 0 5rpx;
}
.nav2-pic {
  width: 100%;
}
.nav2-pic image {
  display: block;
  width: 100%;
}
.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 400rpx;
  color: #fff;
}

.image {
  width: 100rpx;
  height: 100rpx;
}

.grid-item-box {
  flex: 1;
  position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.nav-list::after {
  content: '';
  display: block;
  height: 0;
  line-height: 0;
  clear: both;
  visibility: hidden;
}

.nav-item {
  float: left;
  margin-top: 20rpx;
  width: 20%;
  text-align: center;
  padding: 10rpx 0;
}

</style>